<template>
	<view id="jd-account">
		<view class="header">
			<image src="../../static/img/jd.png" mode=""></image>
		</view>
		<view style="text-align: center; color:#636B7F ">京东账号绑定</view>
		<view class="bind-step-wrap">
			<view class="guide-btn" @click="isShowModal = true"><i class="el-icon-ali-click"></i>点击查看截图上传与复制京东账号引导图</view>
			<view class="nav-box">
				<view class="right mar0_10">
					<view class="introduce bind-step-dot">
						<view> 京东APP个人中心的截图</view>
						<view class="jd-img-box">
							<view class="show-img-box">
								<image src="../../static/img/jd_show_img_1.png" mode=""></image>
								<view class="img-tips">个人中心的示例图</view>
							</view>
							<view class="upload-img-box">
								<image class="upload-img" :src="form.platformUserImg" mode=""></image>
								<view class="upload-btn" @click="chooseImage('platformUserImg')">上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav-box">
				<view class="right">
					<view class="introduce bind-step-dot">
						<view>京东APP个人信息截图</view>
						<view class="jd-img-box">
							<view class="show-img-box">
								<image src="../../static/img/jd_show_img_2.png" mode=""></image>
								<view class="img-tips">个人中心的示例图</view>
							</view>
							<view class="upload-img-box">
								<image class="upload-img" :src="form.platformNameImg" mode=""></image>
								<view class="upload-btn"@click="chooseImage('platformNameImg')">上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav-box">
				<view class="right">
					<view class="introduce bind-step-dot">
						<view>京东APP账号</view>
						<view>
							<input class="account-input" type="text" v-model="form.platformName" placeholder="请输入京东APP个人信息中的用户名"/>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bind-step-abandan">禁止事项</view>
		<view class="bind-step-wrap bind-step-abandan-content">
			<view class="bind-step-warn">
				<i class="el-icon-ali-note"></i>
				以下所有事项请认真看完，禁止违反事项，系统会自动拉黑。若个人原因导致平台账户被拉黑，一经拉黑、永久不解封。禁止事项如下：
			</view>

			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">1</text><view>京东账号必须要实名认证，注册时间要满半年以上</view>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">2</text><view > 禁止在京东上申请退款</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">3</text><view > 禁止向商家索要好评反现</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">4</text><view > 禁止在在京东上和商家客服提及二字</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">5</text><view > 禁止使用京东白条/信用卡/代付/京东小金库</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">6</text><view > 禁止在京东上和商家客服聊天索要小礼物或者赠品</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">7</text><view> 禁止把平台接到的任务截图发给商家</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">8</text><view > 禁止在各种返利平台下单</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">9</text><view > 禁止拒签退回</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">10</text><view > 禁止绑定京东新号</view><br>
			</view>
			<view class="bind-step-warn-list">
				<text class="bind-step-warn-index">11</text><view > 一个京东号只能绑定一个账号</view><br>
			</view>

		</view>
		<button class="sumbit-btn" :loading="loading" :disabled="loading" @click="bind">确定并绑定</button>

		<view class="customize-dialog" v-if="isShowModal">
			<view class="customize-mask"></view>
			<view class="customize-modal">
				<view class="customize-modal-header">引导图</view>
				<view class="customize-modal-content">
					<view class="modal-tips">第一步：打开京东APP，进入京东APP的个人中心，截图，用于个人中心的截图上传，截完图后，点击屏幕右上方的设置按钮（齿轮图标）</view>
					<view><image class="modal-img" src="../../static/img/jd_img_1.png" mode=""></image></view>
					<view class="modal-tips">第二步：进入到账号设置，点击头像账号那块区域</view>
					<view><image class="modal-img" src="../../static/img/jd_img_2.png" mode=""></image></view>
					<view class="modal-tips">第三步：进入到个人信息，截图，用于个人信息的截图上传，截完图后，点击用户账号，进行复制，然后打开平台，上传个人中心和个人信息截图，粘贴账号到对应的位置，最后进行绑定</view>
					<view><image class="modal-img" src="../../static/img/jd_img_3.png" mode=""></image></view>
				</view>
				<view class="customize-modal-footer">
					<view class="close-btn" @click="isShowModal = false">我已了解</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiOtherPlatformBind,
		apiUploadToken
	} from '../../../http/apis.js';
	import { mapState } from 'vuex';
	import qiniuUploader from '../../components/qiniu/qiniuUploader.js';
	import uModal from '../../components/uni-modal/uni-modal.vue';
	export default {
		components: {
			uModal
		},
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				form: {
					token: '',
					platformType: 3,
					platformName: '',
					platformUserImg: '',
					platformNameImg: ''
				},
				uploadToken: '',
				isShowModal: false,
				loading: false
			};
		},
		onLoad() {
			apiUploadToken({}).then(res =>{
			    if(res.data.code == 1)  {
					this.uploadToken = res.data.msg
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		onShow() {
		   this.form.token = this.token
		},
		methods: {
			chooseImage(type) {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['origial','compressed'],
					success: res => {
						that.uploadImg(res,type,res.tempFiles[0].size > 1570000);
					},
					fail: function() {
						that.$msg.showToast('载入图片失败，请稍后再试')
					}
				});
			},
			uploadImg(typeimg,type,fileSize){
				var that = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.getImageInfo({
					src:typeimg.tempFilePaths[0],
					success(res) {
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let img = new Image()
						img.src = res.path
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d')
						let scale = res.height/res.width
						canvas.width = fileSize == true ? 500 : canvasWidth
						canvas.height = fileSize == true ? 500*scale : canvasHeight
						ctx.drawImage(img, 0, 0, fileSize == true ? 500 : canvasWidth , fileSize == true ? 500*scale : canvasHeight )//fileSize == true ? 300 : canvasHeight / 2

						canvas.toBlob(function(fileSrc) {
							let imgSrc = window.URL.createObjectURL(fileSrc)
							var random = Math.floor(Math.random() * (1000 - 1)) + 1
							var timestamp=new Date().getTime();
							var name=imgSrc.substring(imgSrc.lastIndexOf("-")+1);
							var key = name + random.toString() + timestamp.toString() + '.png'
							 qiniuUploader.upload(
							    imgSrc,
							    res => {
							        //图片上传完成后返回值
									that.form[type] = res.imageURL;
									that.$msg.showToast('上传成功')
							    },
							    error => {
							        // resolve(error)
									uni.hideLoading()
									that.$msg.showToast('上传失败')
							    },
							    {
							        region: that.GLOBAL.REGION_VALUE, // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
							        domain: that.GLOBAL.QINIU_URL, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL                                         字  段。否则需要自己拼接
							        key: 'jdAccount/' + key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
							        // 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
							        uptoken: that.uploadToken // 由其他程序生成七牛 uptoken
							    },
							    res => {
							         //上传进度
							        if(res.progress === 100){
										uni.hideLoading()
							        }
							    }
							);
						})
					}
				})

			},
			bind(){
				if(!this.form.platformUserImg){
					this.$msg.showToast('请上传个人中心截图')
					return
				}
				if(!this.form.platformNameImg){
					this.$msg.showToast('请上传个人信息截图')
					return
				}
				if(!this.form.platformName){
					this.$msg.showToast('请粘贴京东账号')
					return
				}
				if(this.form.platformUserImg.indexOf('jdAccount') < 0){
					this.$msg.showToast('上传个人中心截图失败，请重新上传')
					return
				}
				if(this.form.platformNameImg.indexOf('jdAccount') < 0){
					this.$msg.showToast('上传个人信息截图失败，请重新上传')
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.loading = true
				apiOtherPlatformBind(this.form).then(res =>{
					this.loading = false
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.$msg.showToast('绑定成功')
						setTimeout(()=>{
							uni.switchTab({
								url: '../profile/a'
							});
						},1000)
					} else {
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.loading = false
					uni.hideLoading()
					this.$msg.showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}


	#jd-account {
		font-size: 14px;
		.customize-dialog {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 999;
			display: block;
			box-sizing: border-box;
			.customize-mask {
				position: fixed;
				z-index: 999;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.6);
			}
			.customize-modal {
				position: fixed;
				z-index: 999;
				left: 100upx;
				right: 100upx;
				top: 15%;
				background-color: #fff;
				border-radius: 20upx;
				overflow: hidden;
				.customize-modal-header {
					padding: 18upx 24upx;
					line-height: 1.5;
					color: #333;
					font-size: $font-lg;
					text-align: center;
					border-bottom: 1px solid #e0e0e0;
				}
				.customize-modal-content {
					padding: 10px 15px;
					height: 300px;
					overflow-y: scroll;
					color: #545454;
					.modal-tips {
						margin: 20upx 0;
					}
					.modal-img {
						width: 75%;
						height: 400px;
						border:1px solid red;
						display: block;
						margin: 0 auto;
					}
				}
				.customize-modal-footer {
					text-align: center;
					border-top: 1px solid #e0e0e0;
					color: $theme-color;
					font-size: 32upx;
					padding: 24upx;
					line-height: 1.5;
					margin-top: 10upx;
				}
			}
		}


		.bind-step-warn-list{
			display: flex;
			margin: 10upx 0;
			color: #6f6d6d;
		}
		.bind-step-warn-index{
			display: inline-block;
			width: 40upx;
			height: 40upx;
			background: $theme-color;
			border-radius: 50%;
			line-height: 40upx;
			color: #FFFFFF;
			text-align: center;
			margin-right:10upx;
		}
		.bind-step-warn{
			color:red;
			display:flex;
			align-items: baseline;
			i{
				margin-right: 10upx;
			}
		}
		.bind-step-abandan-content{
			padding-top:60upx!important;
		}
		.bind-step-abandan{
			background: $theme-color;
			height: 80upx;
			line-height: 80upx;
			color: #FFFFFF;
			border-radius: 40upx;
			width: 240upx;
			font-size: 40upx;
			text-align: center;
			margin: auto;
			position: relative;
			margin-bottom: -50upx;
		}
		.bind-step-btn-uploaded {
			background: grey !important;
		}

		.bind-step-ps {
			padding-left: 60upx;
			padding-bottom: 30upx;
			color: #999999;

		}


		.bind-step-dot::before {
			content: '';
			position: absolute;
			border: 3px $theme-color solid;
			border-radius: 50%;
			margin-left: -20upx;
			margin-top: 16upx;
		}

		.bind-step-wrap {
			background: #FFFFFF;
			margin: 20upx;
			padding: 20upx;
			border-radius: 20upx;
			border: 1px solid #E0E0E0;
		}
		.guide-btn {
			color: $theme-color;
			.click-img {
				width: 40upx;
				height: 40upx;
				vertical-align: bottom;
				margin-right: 10upx;
			}
		}
		.account-input {
			border: 1px solid #989898;
			font-size: 14px;
			padding: 16upx 10upx;
			border-radius: 10upx;
			margin-top: 20upx;
			width: 100%;
		}
		.jd-img-box {
			margin-top: 20upx;
			text-align: center;
			.show-img-box, .upload-img-box {
				width: 49%;
				display: inline-block;
				image {
					height: 300px;
				}
			}
			.img-tips {
				padding: 10upx 0;
			}

			.upload-img-box {
				margin-left: 2%;
				.upload-btn {
					background: $theme-background-color;
					color: #FFFFFF;
					border-radius: 10upx;
					padding: 10upx 0;
					width: 80%;
					margin: 0 auto;
				}
			}
		}
		.confirm {
			width: 80%;
			padding: 20upx;
			border-radius: 10upx;
			border: 1px solid #ccc;
			background: #FFF;
			text-align: center;
			margin: 30upx auto 40upx;
		}
		.canCommit {
			background: $theme-color;
			color: #FFFFFF;
		}

		.content {
			display: flex;
			flex-direction: column;
			padding: 20upx;
			background: pink;

			.titie {
				font-size: 28upx;
				color: darkred;
			}

			.con {
				color: #000;
				font-size: 36upx !important;

				view {
					margin: 10upx 0;
				}
			}
		}

		.mar0_10 {
			margin: 0px 10px;
		}

		.mar10 {
			margin: 10px;
		}

		.nav-box {
			display: flex;
			margin-top: 20upx;
			align-items: flex-start;

			.right {
				width: 100%;
				display: flex;
				flex-direction: column;
				margin: 0 20upx;

				.introduce {
					color: #666666;
					display: flex;
					flex-direction: column;

					.ger {
						color: #ccc;
						font-size: 24upx;
						text-align: center;
						margin: 20upx 0;
					}

					image {
						width: 100%;
						border: 1px solid #E0E0E0;
						// background: #B5B5B5;
					}
					.upload-img {
						border: 1px dashed #969696;
					}
				}
			}
		}

		.header {
			width: 120upx;
			height: 120upx;
			margin: auto;
			margin-top: 20upx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
		.sumbit-btn {
			margin: 32upx;
			height: 96upx;
			background: $theme-background-color;
			border-radius: 10upx;
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96upx;
			margin-top: 48upx;
		}
	}
</style>

